<template>
    <div>
        <div id="mydiv">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="菜品名称">
                    <el-input v-model="formInline.dishName" placeholder="菜品名称"></el-input>
                </el-form-item>
                <el-form-item label="店铺名称">
                    <el-input v-model="formInline.restaurantName" placeholder="店铺名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="outClear">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- 角色表格  -->
            <el-table
                    :data="roleTable"
                    border
                    style="width: 100%"
                    :header-cell-style="getRowClass">
                <el-table-column
                        prop="mid"
                        label="编号"
                >
                </el-table-column>
                <el-table-column
                        prop="menuImg"
                        label="菜品图片"
                >
                    <template slot-scope="scope">
                        <img :src="scope.row.menuImg" width="50" height="50">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="dishName"
                        label="菜品名称"
                >
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="菜品状态"
                >
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="菜品价格"
                >
                </el-table-column>
                <el-table-column
                        prop="disPrice"
                        label="折扣价格"
                >
                </el-table-column>
                <el-table-column
                        prop="restaurant.restaurantName"
                        label="餐厅名称"
                >
                </el-table-column>
            </el-table>
            <!--分页查询-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Collect",
        data(){
            return{
                // 当前显示的页面
                currentPage:1,
                pageSizes:[5,10,15],
                // 显示几条记录
                pageSize:5,
                // 总条数
                total:0,
                // 模糊查询的表单
                formInline:{},
                // 表格数据
                roleTable:[],
                roleAll:[],
            }
        },
        created() {
            this.onSubmit();
        },
        methods:{
            // 重置
            outClear(){
                this.formInline={};
                this.onSubmit();
            },
            // 模糊查询
            onSubmit(){
                var token = sessionStorage.getItem("token");
                this.$http.post("/collect/collect/selectAll?currentPage="+this.currentPage+"&pageSize="
                    +this.pageSize+"&token="+token,this.formInline).then(result=>{
                    console.log(result)
                    this.roleTable=result.data.data.list;
                    this.total=result.data.data.total;

                })
            },
            // 页面显示的条数大小改变的方法
            handleSizeChange(val) {
                this.pageSize=val;
                this.onSubmit();
            },
            // 页码改变时触发的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.onSubmit();
            },
            // 表头样式
            getRowClass() {
                return "background:#4841C1; color:#fff;";
            },
        }
    }
</script>

<style scoped>
    #mydiv{
        align-content: center;
        text-align: center;
    }
</style>